<template>
<div class='main-container'>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: `${backPath}` }">我的合同</el-breadcrumb-item>
    <el-breadcrumb-item>合同查看</el-breadcrumb-item>
  </el-breadcrumb>
  <h4>合同预览</h4>
  <el-row class='contract-container'>
      <div class='contract-content'>
        <h1 class='contract-title'>
          {{contractDetail.contractTitle}}
        </h1>
        <el-divider></el-divider>
        <section class='contract-sction' v-html='contractDetail.contractContent'>
        </section>
        <section class='contract-footer'>
          <p>
            日期: {{contractDetail.contractDate}}
          </p>
          <p>
            甲方:
            <span class='signal-area'>
               {{contractDetail.partyA}}
            </span>
          </p>
          <p>
            乙方:
            <span class='signal-area'>
              <vue-esign
                ref="esign"
                height="50"
                width='200'
                :isCrop="isCrop"
                :lineWidth="lineWidth"
                :lineColor="lineColor"
                :bgColor.sync="bgColor"
              />
            </span>
          </p>
        </section>
      </div>
  </el-row>
  <el-row class="contract-container">
    <el-button @click="handleReset">重置签名</el-button>
    <el-button @click="handleGenerate" type="primary">提交!</el-button>
  </el-row>

</div>
</template>

<script>
  export default {
    name: 'ContractView',
    components:{
    },
    data(){
      return{
        contractId: this.$route.params.contractId,
        isEdit: this.$route.params.isEdit,
        isHR:this.$route.params.isHR,
        contractDetail:{},

        simgImg: "", //签名图片
        imgWidth: window.screen.width - window.screen.width * 0.1 - 20,//计算签名图片的宽
        imgHeight:
          ((window.screen.width - window.screen.width * 0.1 - 20) / 5) * 2,//计算签名图片的高，宽高比例为5:2
        boxHeight:
          ((window.screen.width - window.screen.width * 0.1 - 20) / 5) * 2 + 20,
        istile: true,
        isShow: false,
        lineWidth: 2,
        lineColor: "#000000",
        bgColor: "#fff",
        resultImg: "",
        isCrop: true,
        canHeight: 40
      }
    },
    async created() {
      await this.getContactsDetail()
    },
    computed:{
      backPath:{
        get(){
          return this.isHR===1?'/contract':'/staffGeneral'
        }
      }
    },
    methods:{
      async getContactsDetail(){
        this.contractDetail={
          contractId: 1,
          contractTitle: '李小龙的入职合同',
          contractContent: '亲爱的<strong>李小龙</strong>先生/女士：<br/><br/>根据国家法律和有关政策，经甲、乙双方平等协商，自愿签订本合同：<br/>一、聘用合同期限。本合同为无固定期限的聘用合同。合同期从<strong>2022年05月26日</strong>起至法定或约定的解除（终止）合同的条件出现为止。<br/>二、工作性质和考核指标乙方同意按甲方工作需要，在<strong>研发部-前端开发工程师</strong>岗位工作，完成该岗位承担的各项工作任务。考核指标按照甲方薪酬管理制度实行。<br/>三、劳动保护和劳动条件甲方按国家和省、市的有关生产、安全、劳动保护、卫生健康规定为乙方提供必要的工作条件，保障乙方在安全、健康的环境中工作。<br/>四、劳动报酬乙方在聘用期间的基本工资按照甲方薪酬管理制度实行，奖金见甲方的奖金发放制度。<br/>五、甲方的权利和义务<br/>（一）甲方的权利<br/>1．依照国家的有关规定和甲方的规章制度对乙方行使管理权、考核权和奖惩权。<br/>2．合同期间因工作需要，甲方有权调整乙方的工作岗位。<br/>3．具有下列情形之一的，甲方可以随时通知乙方解除劳动合同： ',
          contractDate: '2022年5月11日',
          partyA:'王五科技公司'
        }
      },
      // 清空画板
      handleReset() {
        this.$refs.esign.reset();
      },
      // 生成签字图
      handleGenerate() {
        this.$refs.esign
          .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
          .then((res) => {
            this.resultImg = res;
          })
          .catch((err) => {
            // 画布没有签字时会执行这里提示一下
            this.$message({
              type: "warning",
              message: "请签名后再生成签字图片",
            });
          });

        // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
        // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
        setTimeout(() => {
          // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
          // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
          console.log('我是签字后的base64图片',this.resultImg);
        }, 200);
        this.dialogVisible = false;
      },
    }
  }
</script>

<style lang="less" scoped>
  .main-container{
    padding: 10px 20px;
    h4{
      color: gray;
      font-size:20px;
      font-weight: normal
    }
  }
  .contract-container{
    display: flex;
    justify-content: center;
    padding-bottom:60px;
    .contract-content{
      width:80%;
      border:1px solid #ccc;
      padding:  30px;
      color: #343434;
      .contract-title{
        text-align: center;
        font-size: 32px;
        padding:0 50px;
        color:inherit;
      }
      .contract-footer{
        padding-left: 70%;
        p{
          display: flex;
          align-items: center;
          padding:10px 0;
          height:50px;
        }
        .signal-area{
          line-height:50px;
          box-sizing: border-box;
          display: inline-block;
          height:50px;
          width:200px;
        }
      }
    }
  }
</style>
